<template>
	<div>
		<div style="padding: 10px;border-radius: 8px;border: 1px solid#f5f5f5;background: #fff;margin-bottom: 10px;"
			class="displayFlex">
			<div class="mr10">{{params.storageName}}</div>
			<el-date-picker size="small" v-model="params.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择开始日期"
				@change="search" style="width: 150px;" class="mr10">
			</el-date-picker>
			<el-date-picker size="small" v-model="params.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择结束日期"
				@change="search" style="width: 150px;" class="mr10">
			</el-date-picker>

			<el-input v-model="params.wasteName" size="small" placeholder="废物名称" @keyup.enter.native="search"
				style="width: 100px;" class="mr10"></el-input>
			<el-input v-model="params.wasteCode" size="small" placeholder="废物代码" @keyup.enter.native="search"
				style="width: 100px;" class="mr10"></el-input>
			<el-input v-model="params.batchNo" size="small" placeholder="数字识别码" @keyup.enter.native="search"
				style="width: 200px;"></el-input>
		</div>

		<div style="height: calc(100% - 60px);">
			<el-table :data="dataList" style="width: 100%" size="small" height="95%">
				<el-table-column label="数字识别码" prop="batchNo" width="300">
				</el-table-column>
				<el-table-column label="废物名称" prop="wasteName">
				</el-table-column>
				<el-table-column label="废物代码" prop="wasteCode">
				</el-table-column>
				<el-table-column label="数量(单位)" prop="amount">
					<template slot-scope="scope">
						{{scope.row.amount}}{{scope.row.unitValue}}
					</template>
				</el-table-column>
				<el-table-column label="入库时间" prop="inStorageTime">
					<template slot-scope="scope">
						{{scope.row.inStorageTime.split(" ")[0]}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button @click="chehui(scope.row)" type="text" size="small">撤回</el-button>
						<el-button @click="tiaozheng(scope.row)" type="text" size="small" class="ml20">库存调整</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div align="right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="pageIndex" :page-sizes="[10,20,30,50]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	let that

	export default {
		components: {},
		data() {
			return {
				params: {
					ticketId: '',
					storageId: '', // 仓库id
					storageName: '',
					batchNo: '', // 数字识别码
					wasteCode: '', // 危废代码
					wasteName: '', // 危废名称
					startTime: '', // 开始时间
					endTime: '', // 结束时间
				},
				pageIndex: 1,
				pageSize: 10,
				total: 0,
				dataList: []
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.params.storageId = that.$route.query.storageId;
			that.params.storageName = that.$route.query.storageName;
			that.getStorageList()
		},

		methods: {

			tiaozheng(item) {
				this.$prompt('库存调整', item.wasteName + "（" + item.wasteCode + "）", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPlaceholder: "数量",
					inputType: "number",
				}).then(({
					value
				}) => {
					// console.log(value)
					if (!value) return that.tiaozheng(item)
					// if (!value) return that.$message.error("数量必填")
					that.ajax({
						url: '/hw/warehouseReceipt/updateTag',
						data: JSON.stringify({
							tagId: item.id,
							amount: value
						}),
						contentType: 'application/json',
						success: function(result) {
							console.log(result)
							if (result.data) {
								that.$message.success("成功！")
								that.search()
							}
						},
					})
				}).catch(() => {

				});
			},

			chehui(item) {
				this.$prompt('此操作将撤回, 是否继续', item.wasteName + "（" + item.wasteCode + "）", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPlaceholder: "撤回原因",
					inputType: "textarea",
				}).then(({
					value
				}) => {
					if (!value) return that.chehui(item)
					that.ajax({
						url: '/hw/warehouseReceipt/cancelTag',
						data: JSON.stringify({
							tagId: item.id,
							remark: value
						}),
						contentType: 'application/json',
						success: function(result) {
							if (result.data) {
								that.$message.success("成功！")
								that.search()
							}
						},
					})
				}).catch(() => {});
			},

			handleSizeChange: function(val) {
				this.pageIndex = 1;
				this.pageSize = val;
				this.getStorageList();
			},
			handleCurrentChange: function(val) {
				this.pageIndex = val;
				this.getStorageList();
			},

			search() {
				this.pageIndex = 1;
				this.getStorageList();
			},

			getStorageList() {
				that.ajax({
					url: '/hw/warehouseReceipt/pageWasteTagsByStorageId?pageIndex=' + that.pageIndex + '&pageSize=' + that
						.pageSize + '&ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.total = result.data.total
							that.dataList = result.data.records
						}
					},
				})
			},


		}
	}
</script>


<style scoped>
</style>